<template>
  <div>
    <div class="u_content_box">
      <div class="u_content_top">
        <div>
          <a-button type="primary" icon="plus" @click="add">新增</a-button>
        </div>

      </div>
      <div class="u_content_input">
        <a-table :columns="columns" :data-source="list" :scroll="{ x: 1300 }" :pagination="ipagination"
          @change="handleTableChange2">
          <!-- 商品样图 -->
          <span slot="indexImg" slot-scope="indexImg">
            <img :src="indexImg" alt="" class="goodsImg">
          </span>
          <!-- 删除 -->
          <a-popconfirm title="确定要删除嘛?" @confirm="() => shanchu(record._id)" slot="cancle" slot-scope="text, record">
            <a>删除</a>
          </a-popconfirm>
          <!-- 编辑 -->
          <a slot="edit" slot-scope="text, record" @click="() => edit(record)">编辑</a>
        </a-table>
      </div>
    </div>
    <edit v-if="editflag" :flag="editflag" :list="editList" @func="show"></edit>
    <loading v-if="load == 0" class="loading"></loading>
    <router-view />
  </div>
</template>

<script>
const columns = [
  {
    title: "系列ID",
    dataIndex: "_id",
    key: "_id",
    align: "center",
    width: 150,
   
    fixed: "left",
  },
  
  {
    title: "作者",
    width: 150,
    dataIndex: "author",
    key: "author",
    align: "center",
  },
  {
    title: "标题",
    width: 150,
    dataIndex: "title",
    key: "title",
    align: "center",
  },
  {
    title: "封面图",
    width: 150,
    dataIndex: "indexImg",
    key: "indexImg",
    align: "center",
    scopedSlots: { customRender: "indexImg" },
  },
  {
    title: "描述",
    width: 150,
    dataIndex: "detail",
    key: "detail",
    align: "center",

  },
  {
    title: "推广码",
    width: 150,
    dataIndex: "promotionCode",
    key: "promotionCode",
    align: "center",

  },
  {
    title: "发布平台",
    width: 150,
    dataIndex: "publishPlatform",
    key: "publishPlatform",
    align: "center",
    customRender: (state) => { // customRender属性是一个方法，可接收三个参数（val,row,index），分别是当前值、当前行数据和当前索引，与方式 1 中模版的 slot-scope 属性传参类似
      return state === '0' ? '宏琦舍/一品布衣' : '深海漫故事'
    },
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    key: "create_time"
  },
  {
    title: "",
    key: "edit",
    fixed: "right",
    width: 60,
    scopedSlots: { customRender: "edit" },
    align: "center",
  },
  {
    title: "",
    key: "cancle",
    fixed: "right",
    width: 60,
    scopedSlots: { customRender: "cancle" },
    align: "center",
  },
]
const ipagination = {
  current: 1,
  pageSize: 10,
  pageSizeOptions: ["10"],
  showTotal: (total, range) => {
    return range[0] + "-" + range[1] + " " + "共" + total + "条"
  },
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
}

import edit from "./seriesEdit.vue"
import loading from "../../components/loading.vue"
import { indexDel, getImgToken, getSeriesList,deleteSeries } from "../../http/api"
export default {
  name: "userMsg",
  data () {
    return {
      //搜索
      searchKey: "",
      searchText: "",
      columns,
      list: [],
      ipagination,
      editflag: false,
      editList: {},
      page: 1,
      load: 1, //加载中

      imgToken: '',
      userInfo: {}
    }
  },
  created () {
    this.ipagination.current = 1
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    // this.indexList(this.page, this.$store.state.user.shopId);
    this.getList()
    this.getImgToken()
  },
  methods: {

    //删除
    shanchu (_id) {
      // console.log(id);
      this.deleteSeries(_id)
    },
    //编辑
    edit (list) {
      // console.log(list);
      this.editflag = true
      list.imgToken = this.imgToken
      this.editList = list
    },
    //新增    
    async add () {

      this.editflag = true
      this.editList = {}

      this.editList.imgToken = this.imgToken

    },
    //子组件传值展示model框
    show (e) {
      // console.log(e);
      this.editflag = e
      this.list = []
      this.getList()
    },
    //分页
    handleTableChange2 (pagination, filters, sorter) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.page = pagination.current
      this.indexList(this.page, this.$store.state.user.shopId)
    },
    //获取系列列表
    async getList () {
      this.load = 0
      const parameter = {
        "$url": "getSeries",
        "skip": this.list.length,
        "authorID": this.userInfo._id
      }
      const res = await getSeriesList(parameter)
      console.log('系列列表', res)

      var d = res.res
      this.load = 1
      this.ipagination.total = res.total_count.total
      d.data.map((item) => {
        item.key = item._id
      })
      this.list = d.data
    },

    //删除系列
    async deleteSeries (_id) {
      const parameter = {
        "$url": "deleteSeries",
        "_id": _id,
      }
      const res = await deleteSeries(parameter)
      console.log('删除系列', res)
      if (res.code == 200) {
        this.$tishi("success", res.msg)
        if ((this.ipagination.total - 1) % this.ipagination.pageSize == 0 && (this.page - 1) != 0) {
          this.page = this.page - 1
        }
        this.getList()
      } else {
        this.$tishi("warning", res.msg)

      }

    },
    async getImgToken () {
      const parameter = {
        "$url": "getQiniuToken",
      }
      const res = await getImgToken(parameter)
      console.log('上传图片token', res)
      this.imgToken = res.uploadToken
    },
  },
  components: {
    edit,
    loading,
  },
}
</script>

<style scoped>
.u_content_box {
  width: 100%;
}

.u_content_top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
}

.u_content_input {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #efefef;
}

.u_userImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.editable-row-operations a {
  margin-right: 8px;
}

.goodsImg {
  width: 140rem;
  height: 140rem;
  border-radius: 4rem;
}
</style>